import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
import * as LinkStories from "./index.stories";

<Meta of={LinkStories} />

# Link embeds examples

<Subtitle>A list of examples for link embedding.</Subtitle>

- [Basic embedding](#basic-embedding)
- [Specify label text](#specify-label-text)
- [Hide an arrow icon](#hide-an-arrow-icon)

## Basic embedding

To simply display a link, set an URL to an `url` option.

[Example](/story/docs-link-examples--embed-link)

```js
// myStories.stories.jsx
export const myStory = () => <MyComponent />;

myStory.parameters = {
  design: {
    type: "link",
    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
  },
};
```

## Specify label text

You can customize display text by providing a `label` option.

[Example](/story/docs-link-examples--set-label)

```js
// myStories.stories.jsx
export const myStory = () => <MyComponent />;

myStory.parameters = {
  design: {
    type: "link",
    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
    label: "Open design in new tab",
  },
};
```

## Hide an arrow icon

To hide a right-arrow icon next to the label, turn off `showArrow`.

[Example](/story/docs-link-examples--hide-arrow-icon)

```js
// myStories.stories.jsx
export const myStory = () => <MyComponent />;

myStory.parameters = {
  design: {
    type: "link",
    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
    showArrow: false,
  },
};
```
